<template>
    <div class="more-mode" :ga_event="item.article_genre + '_item_click'">
        <div class="title-box" :ga_event="item.article_genre + '_title_click'">
            <a class="link" :href="item.source_url" target="_blank">{{item.title}}</a>
        </div>
        <div class="bui-box img-list" :ga_event="item.article_genre + '_img_click'">
            <a v-for="(img, index) in item.image_list" class="img-wrap img-item" :href="img.source_url || item.source_url" target="_blank">
                <img v-lazy="img.url" class="lazy-load-img" />
            </a>
            <a v-if="item.image_list.length < 4" class="img-wrap img-item" :href="item.source_url" target="_blank">
        <span class="more-info">
          查看详情&nbsp<tt-icon type="nextpagetool" color="#406599" size="12"></tt-icon>
        </span>
            </a>
            <i v-if="!item.ad_label" class="pic-tip">
                <span>{{item.gallary_image_count}}图</span>
            </i>
        </div>
        <FooterBar :item="item"></FooterBar>
    </div>
</template>

<style lang="less">
    @import './style/mode.less';

    .more-mode {
        .mode-base();

        .img-list {
            position: relative;
            margin: 10px 0;
        }

        .img-item {
            float: left;
            width: 158px;
            height: 102px;
            margin-left: 9px;

            &:first-child {
                margin-left: 0;
            }
        }

        .more-info {
            display: inline-block;
            width: 88px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            font-size: 14px;
            color: #406599;
            margin-top: 36px;
        }
    }

</style>

<script>
  import FooterBar from '../common/footerBar';

  export default {
    props: {
      item: {
        type: Object,
        default: {}
      }
    },
    components: {
      FooterBar
    }
  };
</script>



// WEBPACK FOOTER //
// moreMode.vue?1ef54975